<div style="position:relative">
    <div class="row" style="width:300px;position: absolute;left:550px;top:0px">
        <div class="row" >
            <input type="button" data-dojo-attach-point="saveButton" data-dojo-type="dijit.form.Button" value="Save" label="Save" />
            <input type="button" data-dojo-attach-point="backButton"  data-dojo-type="dijit.form.Button" value="Back" label="Back" />
        </div>
        <div class="row">
            <div>Last modified: <span data-dojo-attach-point="updatedTime"></span></div>
        </div>
        <div class="row">
            <div>Created: <span data-dojo-attach-point="createdTime"></span></div>
        </div>
        <div class="row">
            <div style="background-color:#eeeeee;width:189px ;height:163px;">
                <img data-dojo-attach-point="photo" src="" width="189" height="163" />
            </div>
        </div>
        <div class="row">
            <input type="button" data-dojo-attach-point="uploadButton"  data-dojo-type="dijit.form.Button" value="Upload Picture" label="Upload Picture" />
        </div>
    </div>
    <form data-dojo-type="dijit.form.Form" id="productForm1">
    <input style="display:none" name="ID" data-dojo-attach-point="productId"  data-dojo-type="dijit.form.TextBox"/>
    <div class="row" style="width:400px">
        <div>PRODUCTS ATTRIBUTES</div>
        <hr/>
    </div>
    <div class="row">
        <label>Name</label><input name="Name" type="text" data-dojo-type="dijit.form.TextBox" style="width:250px"/>
    </div>
    <div class="row">
        <label>Ref#/SKU</label><input name="Ref" type="text" data-dojo-type="dijit.form.TextBox" style="width:250px"/>
    </div>
    <div class="row">
        <label style="vertical-align: top">Type</label>
        <select size="5" name="Type[]" data-dojo-type="dijit.form.MultiSelect" value="" style="width:250px;margin-left: -4px">
            <option value="Collections(series)">Collections(series)</option> 
            <option value="Soft Case">Soft Case</option> 
            <option value="Hard Case">Hard Case</option> 
            <option value="Cabin Size">Cabin Size</option> 
            <option value="Rolling Duffle">Rolling Duffle</option>
        </select>
    </div>
    <div class="row">
        <label>Unit Weight</label><input name="UnitWeight" type="text" data-dojo-type="dijit.form.TextBox" style="width:250px"/>
    </div>
    <div class="row">
        <label>Set Weight</label><input name="SetWeight" type="text" data-dojo-type="dijit.form.TextBox" style="width:250px"/>
    </div>
    <div class="row">
        <label>Price</label><input name="Price" type="text" data-dojo-type="dijit.form.TextBox" style="width:250px"/>
    </div>
    <div class="row">
        <label style="vertical-align: top">Special Items</label>
        <select size="6" name="SpecialItem[]" data-dojo-type="dijit.form.MultiSelect" value="" style="width:250px;margin-left: -4px">
            <option value="Promotion">Promotion</option> 
            <option value="New Item">New Item</option> 
            <option value="Best Seller">Best Seller</option> 
            <option value="Man Series">Man Series</option> 
            <option value="Woman Series">Woman Series</option> 
            <option value="Light Series">Light Series</option> 
        </select>
    </div>
    <div class="row">
        <label>Display Feather</label>
        <select name="DisplayFeather" data-dojo-type="dijit.form.Select" style="width:250px;margin-left: -4px">
            <option value="true">Yes</option>
            <option value="false">No</option>
        </select>
    </div>
    <div class="row">
        <label>New or Best Seller</label>
        <select name="BestSeller" data-dojo-type="dijit.form.Select" style="width:250px;margin-left: -4px">
            <option value="none">None</option>
            <option value="Best Seller">Best Seller</option>
            <option value="New Product">New Product</option>
        </select>
    </div>
    <div class="row">
        <label>Display Sex</label>
        <select name="DisplaySex" data-dojo-type="dijit.form.Select" style="width:250px;margin-left: -4px">
            <option value="none">None</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
    </div>
    <div class="row">
        <label>Special Offer</label>
        <select name="SpecialOffer" data-dojo-type="dijit.form.Select" style="width:250px;margin-left: -4px">
            <option value="true">Yes</option>
            <option value="false">No</option>
        </select>
    </div>
    <div class="row">
        <label>Special Offer Text</label><input name="SpecialOfferText" type="text" data-dojo-type="dijit.form.TextBox" style="width:250px"/>
    </div>
    <div class="row">
        <label>Size</label><input name="Size" type="text" data-dojo-type="dijit.form.TextBox" style="width:250px"/>
    </div>
    <div class="row">
        <label style="vertical-align: top">Main fabrics</label>
        <div data-dojo-type="dijit.Editor" data-dojo-attach-point="mainFabricsEditor" name="MainFabrics" data-dojo-props="height:'150px'" style="display:inline-block;width:500px;margin-left: -4px"></div>
    </div>
    <div class="row">
        <label style="vertical-align: top">Packing details</label>
        <div data-dojo-type="dijit.Editor" data-dojo-attach-point="packingDetailEditor" name="PackingDetail" data-dojo-props="height:'150px'" style="display:inline-block;width:500px;margin-left: -4px"></div>
    </div>
    <div class="row">
        <label>MOQ</label><input name="MOQ" type="text" data-dojo-type="dijit.form.TextBox" style="width:250px"/>
    </div>
    <div class="row">
        <label style="vertical-align: top">Usage</label>
        <select size="2" name="Usage[]" data-dojo-type="dijit.form.MultiSelect" value="" style="width:250px;margin-left: -4px">
            <option value="Business">Business</option> 
            <option value="Holidays">Holidays</option> 
        </select>
    </div>
    <div class="row">
        <label style="vertical-align: top">Style</label>
        <select size="3" name="Style[]" data-dojo-type="dijit.form.MultiSelect" value="" style="width:250px;margin-left: -4px">
            <option value="Class">Class</option> 
            <option value="Fashion">Fashion</option> 
            <option value="Elegant">Elegant</option>
        </select>
    </div>
    <div class="row">
        <label style="vertical-align: top">Price</label>
        <select size="4" name="PriceLevel[]"  data-dojo-type="dijit.form.MultiSelect" value="" style="width:250px;margin-left: -4px">
            <option value="Very Low">Very Low</option>
            <option value="Low">Low</option>
            <option value="Middle">Middle</option> 
            <option value="Higher">Higher</option>
        </select>
    </div>
    <div class="row" >
        <label style="vertical-align: top">Product Description</label>
        <div data-dojo-type="dijit.Editor" data-dojo-attach-point="productDescriptionEditor" name="ProductDescription" data-dojo-props="height:'150px'" style="display:inline-block;width:500px;margin-left: -4px"></div>
    </div>
    <div class="row">
        <label style="vertical-align: top">Like</label>
        <div data-dojo-type="dijit.Editor" data-dojo-attach-point="likeEditor" name="Like" data-dojo-props="height:'150px'" style="display:inline-block;width:500px;margin-left: -4px"></div>
    </div>
    <div class="row">&nbsp;</div>
    <div class="row" style="width:400px">
        <div>Ranking</div>
        <hr/>
    </div>
    
    <div class="row" >
        <div data-dojo-type="widget.RankingChart" data-dojo-attach-point="rankingChart"></div>
    </div>
    
    <div class="row">
        <label>Type of product</label>
        <select name="ProductTypeID" data-dojo-attach-point="productTypeSelect" data-dojo-type="dijit.form.Select" style="width:250px;margin-left: -4px">
        </select>
    </div>
   
    
    <table width="90%" cellpadding="3">
        <tr>
            <td>Trolley System Comments</td>
            <td>Wheels Comments</td>
            <td>Top Handle Comments</td>
            <td>Side Handle Comments</td>
            <td>Construction Comments</td>
        </tr>
        <tr>
            <td><textarea type="text" data-dojo-type="dijit.form.SimpleTextarea" id="comments_type_1" style="width:120px"></textarea></td>
            <td><textarea type="text" data-dojo-type="dijit.form.SimpleTextarea" id="comments_type_17" style="width:120px"></textarea></td>
            <td><textarea type="text" data-dojo-type="dijit.form.SimpleTextarea" id="comments_type_15" style="width:120px"></textarea></td>
            <td><textarea type="text" data-dojo-type="dijit.form.SimpleTextarea" id="comments_type_16" style="width:120px"></textarea></td>
            <td><textarea type="text" data-dojo-type="dijit.form.SimpleTextarea" id="comments_type_3" style="width:120px"></textarea></td>
        </tr>
    </table>
    
    <!--
    <div class="row" style="width:400px">
        <div>PRACTICAL RANKING</div>
        <hr/>
    </div>
    <div class="row">
    <label>Inner Organization</label><input name="InnerOrg" type="text" data-dojo-type="dijit.form.TextBox" style="width:250px"/>
    </div>
    <div class="row">
    <label>Outside Organization</label><input name="OuterOrg" type="text" data-dojo-type="dijit.form.TextBox" style="width:250px"/>
    </div>
    <div class="row">
    <label>Expandable</label><input name="Expandable" type="text" data-dojo-type="dijit.form.TextBox" style="width:250px"/>
    </div>
    -->
    
    <div class="row">&nbsp;</div>
    <div class="row"><a data-dojo-attach-point="expandButton" href="javascript:void(0)">Expand all</a><a data-dojo-attach-point="collapseButton" href="javascript:void(0)">Collapse all</a></div>
    <div class="row supplies" id="supplies_section">
        <div class="row">
            <label>Trolley system</label>
            <div class="section-1-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="1">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="1" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="1">View</a>
            <div class="section-1-2 section-factor">
                &nbsp;
            </div>
        </div>

        <div class="row">
            <label>Main fabric</label>
            <div class="section-2-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="2">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="2" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="2">View</a>
            <div class="section-2-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Construction</label>
            <div class="section-3-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="3">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="3" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="3">View</a>
            <div class="section-3-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Stitching</label>
            <div class="section-4-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="4">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="4" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="4">View</a>
            <div class="section-4-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Triming</label>
            <div class="section-5-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="5">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="5" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="5">View</a>
            <div class="section-5-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Zipper</label>
            <div class="section-6-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="6">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="6" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="6">View</a>
            <div class="section-6-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Protection - Shoulder</label>
            <div class="section-7-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="7">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="7" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="7">View</a>
            <div class="section-7-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Protection - Corner</label>
            <div class="section-8-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="8">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="8" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="8">View</a>
            <div class="section-8-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Protection - Back</label>
            <div class="section-9-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="9">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="9" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="9">View</a>
            <div class="section-9-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Protection - Bottom</label>
            <div class="section-10-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="10">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="10" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="10">View</a>
            <div class="section-10-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Protection - Wheels</label>
            <div class="section-11-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="11">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="11" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="11">View</a>
            <div class="section-11-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Side Studs</label>
            <div class="section-12-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="12">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="12" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="12">View</a>
            <div class="section-12-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Lining</label>
            <div class="section-13-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="13">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="13" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="13">View</a>
            <div class="section-13-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Studs</label>
            <div class="section-14-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="14">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="14" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="14">View</a>
            <div class="section-14-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Top handle</label>
            <div class="section-15-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="15">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="15" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="15">View</a>
            <div class="section-15-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Side handle</label>
            <div class="section-16-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="16">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="16" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="16">View</a>
            <div class="section-16-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Wheels</label>
            <div class="section-17-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="17">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="17" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="17">View</a>
            <div class="section-17-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Reinforcment fabrics - Corner</label>
            <div class="section-18-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="18">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="18" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="18">View</a>
            <div class="section-18-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Reinforcment fabrics - Handle</label>
            <div class="section-19-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="19">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="19" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="19">View</a>
            <div class="section-19-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Zipper puller</label>
            <div class="section-20-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="20">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="20" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="20">View</a>
            <div class="section-20-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Inner organization</label>
            <div class="section-21-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="21">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="21" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="21">View</a>
            <div class="section-21-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Outside organization</label>
            <div class="section-22-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="22">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="22" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="22">View</a>
            <div class="section-22-2 section-factor">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <label>Expandable</label>
            <div class="section-23-1" style="display:inline-block ;width:350px; ">
                &nbsp;
            </div>
            <a class="add-supply" href="javascript:void(0)" supplyType="23">Add</a>
            <a class="del-supply" href="javascript:void(0)" supplyType="23" >Clear</a>
            <a class="view-supply" href="javascript:void(0)" supplyType="23">View</a>
            <div class="section-23-2 section-factor">
                &nbsp;
            </div>
        </div>
    </div>
    </form>
    
    
    
    <div style="width:300px" data-dojo-attach-point="uploadDialog" data-dojo-type="dijit.Dialog" title="Upload Picture">
        <form id="productForm2" data-dojo-type="dijit.form.Form" action="product/fileupload" method="post" enctype="multipart/form-data">
            <input data-dojo-attach-point="uploadProductId" data-dojo-type="dijit.form.TextBox" name="pid" style="display: none"/>
            <input data-dojo-type="dojox.form.FileInput" name="file" />
            <br/>
            <div style="text-align: center"><input data-dojo-attach-point="doUploadButton" data-dojo-type="dijit.form.Button" label="Upload" /></div>
        </form>
    </div>
    
    <div style="width:450px" data-dojo-attach-point="supplyDialog" data-dojo-type="dijit.Dialog" title="Please select supply">
        <form id="productForm3" data-dojo-type="dijit.form.Form" method="post">
            <input data-dojo-attach-point="dProductId" name="productId" data-dojo-type="dijit.form.TextBox" style="display:none"/>
            <input data-dojo-attach-point="dSupplyTypeId" name="supplytypeId" data-dojo-type="dijit.form.TextBox" style="display:none"/>
            <select style="width:350px" data-dojo-attach-point="dSupplyId" name="supplyId" data-dojo-attach-point="supplySelect" data-dojo-type="dijit.form.Select">
                
            </select>
            <input data-dojo-attach-point="supplyAddButton" data-dojo-type="dijit.form.Button" label="Submit"/>
        </form>
    </div>
    
    
    <div style="width:600px" data-dojo-attach-point="supplyInfoDialog" data-dojo-type="dijit.Dialog" title="Supply Details">
        <form style="margin-left:50px" data-dojo-type="dijit.form.Form" id="supplyInfo">
            <div class="row">
                <label>Ref #</label><input readonly name="Ref" style="width:250px" data-dojo-type="dijit.form.TextBox" />
            </div>
            <div class="row">
                <label>Name</label><input readonly name="Name" style="width:250px" data-dojo-type="dijit.form.TextBox" />
            </div>
            <div class="row">
                <label style="vertical-align: top">Comments</label><textarea readonly rows="4" name="Comments" style="width:250px" data-dojo-type="dijit.form.SimpleTextarea" ></textarea>
            </div>
            <div class="row">
                <label>Supplier</label><input readonly name="Supplier" style="width:250px" data-dojo-type="dijit.form.TextBox" />
            </div>
            <div class="row">
                <label>Price</label><input readonly name="Price" style="width:250px" data-dojo-type="dijit.form.TextBox" />
            </div>
            <div class="row">
                <label>Unit</label><input readonly name="Unit" style="width:250px" data-dojo-type="dijit.form.TextBox" />
            </div>
            <div class="row">
                <label>Weight</label><input readonly name="Weight" style="width:250px" data-dojo-type="dijit.form.TextBox" />
            </div>

            <div class="row">
                &nbsp;
            </div>

            <div class="row">
                <div>RANGKING</div>
                <div style="width:420px"><hr/></div>
            </div>
            <div class="row">
                <label>Type</label>
                <select readonly name="SuppylyTypeId" data-dojo-attach-point="supplyTypeSelect" data-dojo-type="dijit.form.Select" style="width:250px">
                </select>
            </div>
        </form>
    </div>
    
</div>